<template>
  <div class="tree-card">
    <div class="tree-search">
      <el-input v-model="keyword" placeholder="菜单名称" clearable>
        <el-button slot="append" icon="el-icon-search" @click="getTreeData"></el-button>
      </el-input>
    </div>
    <div class="tree-content">
      <el-tree ref="tree" v-loading="loading" node-key="id" :data="treeData" :props="defaultProps"
               show-checkbox default-expand-all highlight-current :filter-node-method="handleFilter"
               @node-click="handleSelected">
      </el-tree>
    </div>
  </div>
</template>
<script>
import {treeselect} from "../../../../api/tree";

export default {
  name: "MenuTreeCard",
  data() {
    return {
      loading: false,
      baseUrl: '/system/menu/',
      treeData: [],
      keyword: undefined,
      defaultProps: {
        label: 'label',
        children: 'children',
      }
    }
  },
  created() {
    this.getTreeData()
  },
  watch: {
    keyword(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    getTreeData() {
      this.loading = true
      treeselect(this.baseUrl, {}).then((res) => {
        this.treeData = res.trees;
        this.loading = false
        console.log(this.treeData)
      })
    },
    handleFilter(val, data) {
      if (!val) return true;
      return data.label.indexOf(val) !== -1;
    },
    handleSelected(key, node, event) {
      this.$emit('select', key)
    }
  }
}
</script>
<style scoped lang="scss">
.tree-card {
  width: 100%;
  height: 100%;
  padding: 0;
}

.tree-search {
  margin: 5px 0;
  height: 40px;
  line-height: 40px;
}

.tree-content {
  margin: 10px auto;
  height: calc(100% - 62px);
  overflow: auto;
}
</style>
